<template>
	<view>
		<view style="font-size: 24rpx;margin-left: 12rpx;">万吨</view>
		<view class="charts-box">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>
	</view>
	
</template>

<script>
import { barDataDynamic } from '@/api/product.js';

export default {
	props: ['yearMonth'],
	data() {
		return {
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			// opts: {
			// 	dataLabel: false,
			// 	color: ["#48DE94", "#1F90FF", "#9463F7", "#F4C042", "#EE6666", "#1890FF", "#91CB74", "#FAC858",
			// 		"#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
			// 		"#ea7ccc"
			// 	],
			// 	padding: [15, 15, 0, 5],
			// 	touchMoveLimit: 24,
			// 	enableScroll: true,
			// 	legend: {
			// 		lineHeight: 18,
			// 		show: true,
			// 		position: "top",
			// 		fontSize: 10,
			// 		// symbolWidth: 8,
			// 		// borderRadius: '50%'

			// 		// show: true,
			// 		// position: "top",
			// 		// fontSize:10,

			// 		// show: true,
			// 		// itemWidth: 12, // 图例项宽度（含标记+文本）
			// 		// itemHeight: 10, // 图例项高度
			// 		// symbolWidth: 8, // 标记块宽度
			// 		// symbolHeight: 8, // 标记块高度
			// 		// symbolPadding: 4, // 标记与文本间距
			// 		// formatter: function(name) {
			// 		// 	return {
			// 		// 		backgroundColor: this.colorList[this.seriesIndex],
			// 		// 		borderRadius: '50%', // 关键：圆形标记
			// 		// 		padding: [2, 4] // 调整标记内边距
			// 		// 	};
			// 		// }
			// 	},
			// 	xAxis: {
			// 		disableGrid: true,
			// 		scrollShow: true,
			// 		itemCount: 5
			// 	},
			// 	yAxis: {
			// 		data: [{
			// 			min: 0
			// 		}]
			// 	},
			// 	extra: {
			// 		column: {
			// 			type: "group",
			// 			width: 8,
			// 			seriesGap: 2,
			// 			activeBgColor: "#000000",
			// 			activeBgOpacity: 0.08,
			// 			barBorderCircle: true,
			// 		}
			// 	}
			// }
			opts: {
				dataLabel: false,
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 15, 0, 5],
				enableScroll: true,
				legend: {
					lineHeight: 20,
					show: true,
					position: 'bottom',
					fontSize: 10,
				},
				xAxis: {
					disableGrid: true,
					fontSize: 10,
					scrollShow: true,
					itemCount: 15
				},
				yAxis: {
					data: [
						{
							min: 0
						}
					]
				},
				extra: {
					column: {
						type: 'stack',
						width: 15,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						labelPosition: 'center'
					}
				}
				// extra: {
				// 	column: {
				// 		type: 'group',
				// 		width: 8,
				// 		seriesGap: 2,
				// 		activeBgColor: '#000000',
				// 		activeBgOpacity: 0.08,
				// 		barBorderCircle: true
				// 	}
				// }
			}
		};
	},
	mounted() {
		this.getServerData();
	},
	methods: {
		getServerData() {
			barDataDynamic(this.yearMonth).then((res) => {
				// console.log(res);
				const transformedData = this.transformMaterialData(res.data);
				this.chartData = JSON.parse(JSON.stringify(transformedData));
			});
			//模拟从服务器获取数据时的延时
			// setTimeout(() => {
			// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			// 	let res = {
			// 		categories: ["01", "02", "03"],
			// 		series: [{
			// 				name: "5-10",
			// 				data: [146, 108, 75]
			// 			},
			// 			{
			// 				name: "10-20",
			// 				data: [93, 122, 92]
			// 			},
			// 			{
			// 				name: "20-30",
			// 				data: [102, 92, 73]
			// 			},
			// 			{
			// 				name: "机制砂",
			// 				data: [142, 106, 117]
			// 			},
			// 			{
			// 				name: "特种料",
			// 				data: [148, 106, 97]
			// 			}
			// 		]
			// 	};
			// 	this.chartData = JSON.parse(JSON.stringify(res));
			// }, 500);
		},
		transformMaterialData(rawData) {
			// 创建类型-日期映射表
			const typeMap = {};
			const dateSet = new Set();

			// 第一次遍历：建立映射关系
			rawData.forEach((item) => {
				const dateShort = item.date.slice(-2); // 提取日期后两位
				dateSet.add(dateShort);

				if (!typeMap[item.type]) {
					typeMap[item.type] = {};
				}
				typeMap[item.type][dateShort] = item.value;
			});

			// 提取并排序日期
			const categories = Array.from(dateSet).sort();

			// 构建series数组
			const series = Object.keys(typeMap).map((type) => {
				return {
					name: type,
					data: categories.map((date) => {
						// 如果该日期存在数据则使用，否则返回null
						return typeMap[type][date] ?? null;
					})
				};
			});
			console.log(series);
			console.log(categories);
			return {
				categories,
				series
			};
		}
	}
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
	width: 100%;
	height: 400rpx;
}
</style>
